<template>
	<div id="leftSide">
		<el-row>
		  <el-col>
		    <el-menu
		      active-text-color="#ffd04b"
		      background-color="#545c64"
		      class="el-menu-vertical-demo"
		      text-color="#fff"
		    >
				  <template v-for="(item,index) in menuList" :key="index">
					  <router-link :to="item.path" v-if="!item.children" :key="index">  <!-- 路由跳转  v-bind:$router 或简写为 :to-->
						  <el-menu-item v-bind:index="index + ''"> <!--通过遍历第一层配置-->
							  <template #title>
								  <el-icon><component :is="item.icon"></component></el-icon>
								  <span>{{item.name}}</span>
							  </template>
						  </el-menu-item>  
					  </router-link>
					  <!-- 将含有子菜单的遍历出来 -->
					  <el-sub-menu v-bind:index="index + ''" v-else>
						  <template #title>
							  <!-- :is动态组件 -->
							  <el-icon><component :is="item.icon"></component></el-icon>
							  <span>{{item.name}}</span>
						  </template>
						  <!-- 遍历子菜单 -->
						  <router-link v-for="(subItem,subIndex) in item.children" :key="subIndex">
							  <el-menu-item :index="index + '-' + subIndex">
								  <template #title>
									  <span>{{subItem.name}}</span>
								  </template>
							  </el-menu-item>
						  </router-link>
					  </el-sub-menu>  
				  </template>
		    </el-menu>
		  </el-col>
		</el-row>
	</div>
</template>

<script>
import router from '@/router/index';
export default{
	data(){
		return{
			menuList:[],
		}
	},
	mounted() {
	    let routes = router.options.routes;
	    this.menuList = routes[1].children;
	    console.log(this.menuList);
	  },
}

</script>

<style>
	/* 每层设置百分比的高度、导航栏才能填充 */
	#leftSide,.el-row,.el-col,.el-menu{
		height: 100%;
	}
</style>